<template>
    <div id="index">
        <router-view></router-view>
        <mt-tabbar v-model="selected">
            <mt-tab-item @click.native="homePage" id="homePage" >
                <p >任务主页</p>
            </mt-tab-item>
            <mt-tab-item @click.native="task" id="task">
                <p >超级达人</p>

            </mt-tab-item>
             <mt-tab-item @click.native="showDiv()" id="add">
                <div >
                    <p>发布任务</p>
                </div>
            </mt-tab-item>
            <mt-tab-item @click.native="welfare" id="welfare">
                <p >超级福利</p>
            </mt-tab-item>
            <mt-tab-item @click.native="me" id="me">
                <p >我的帮帮</p>
            </mt-tab-item>
        </mt-tabbar>
        <div @click="closeDiv()" id="Window" v-show="maskWindow">
        </div>
        <div id="maskLayer" v-show="maskLayer">

            <div class="add" style="display:flex;flex-wrap:wrap;">
                <section>
                    <router-link to="/expressPub" style="text-decoration:none;">
                        <img src="../assets/tabber/express.png" alt=""><p>快递</p>
                    </router-link>
                </section>
                <section>
                    <router-link to="/secHandPub" style="text-decoration:none;">
                        <img src="../assets/tabber/secondhand.png" alt=""><p>二手</p>
                    </router-link>
                 </section>
               <section>
                    <router-link :to="{name:'doublePub',params:{id:2}}" style="text-decoration:none;">
                        <img src="../assets/tabber/double.png" alt=""><p>替身</p>
                    </router-link>
                </section>
                <section>
                    <router-link :to="{name:'doublePub',params:{id:1}}" style="text-decoration:none;">
                        <img src="../assets/tabber/other.png" alt=""><p>其他</p>
                    </router-link>
                </section>
                <section>
                    <router-link to="/ptPubDay" style="text-decoration:none;">
                        <img src="../assets/tabber/part-job.png" alt=""><p>兼职</p>
                    </router-link>
                </section>
                <section>
                    <router-link to="/print" style="text-decoration:none;">
                        <img src="../assets/tabber/print.png" alt=""><p>打印</p>
                    </router-link>
                </section>
            </div>
            <div @click="closeDiv()" style="margin-top:2.5rem;">
                <img style="width:1rem;height:1rem;"src="../assets/tabber/delete.png" alt="">
            </div>
        </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
       selected:"",
       maskWindow:false,
       maskLayer:false,
    }
  },
  methods:{
    showDiv() {
        this.maskLayer=true;
        this.maskWindow=true;
    },
    closeDiv() {
        this.maskLayer=false;
        this.maskWindow=false;
    },
    homePage(){
        this.$router.push('/homePage')
    },
    task(){
        this.$router.push('/task')
    },
    welfare(){
        this.$router.push('/welfare')
    },
    me(){
        this.$router.push('/me')
    }
  }
}
</script>
<style>

#index .mint-tabbar{
    position:fixed;
  height:3rem;
  bottom: 0;
  left:0;
  z-index: 2000;
}
#index .mint-tab-item-label{
    display:inline-block;
    font-size:0.65rem;
    color:#606266;
    line-height:0.8rem;
}
#index .mint-tab-item{
    padding:0.5rem 0;
}
#index .mint-tab-item img{
    width:1.35rem;
    height:1.2rem;
}
#index .mint-tabbar .mint-tab-item.is-selected .mint-tab-item-label{
    color:#29a193;
}
#index .mint-tabbar .mint-tab-item:nth-child(1) .mint-tab-item-label::before{
    content:url(../assets/tabber/home.png);
}
#index .mint-tabbar .mint-tab-item:nth-child(1).is-selected .mint-tab-item-label::before{
    content:url(../assets/tabber/homePageBo.png);
 }
#index .mint-tabbar .mint-tab-item:nth-child(2) .mint-tab-item-label::before{
    content:url(../assets/tabber/untask.png);
}
#index .mint-tabbar .mint-tab-item:nth-child(2).is-selected .mint-tab-item-label::before{
    content:url(../assets/tabber/task.png);
 }
 #index .mint-tabbar .mint-tab-item:nth-child(3) .mint-tab-item-label::before{
    content:url(../assets/tabber/add.png);
}
 #index .mint-tabbar .mint-tab-item:nth-child(4) .mint-tab-item-label::before{
    content:url(../assets/tabber/unwelfare.png);
}
#index .mint-tabbar .mint-tab-item:nth-child(4).is-selected .mint-tab-item-label::before{
    content:url(../assets/tabber/welfare.png);
 }
 #index .mint-tabbar .mint-tab-item:nth-child(5) .mint-tab-item-label::before{
    content:url(../assets/tabber/me.png);
}
#index .mint-tabbar .mint-tab-item:nth-child(5).is-selected .mint-tab-item-label::before{
    content:url(../assets/tabber/mine.png);
 }
#index #Window{
    background-color:#4c4c4c;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    filter: alpha(opacity=50);
    opacity: 0.5;
    z-index: 2001;
    position: absolute;
}
#index #maskLayer {
    width: 100%;
    height: 50%;
    background:#ffffff;
    line-height: 1.5rem;
    left: 0;
    top: 50%;
    color:#000;
    z-index: 2002;
    position: absolute;
    text-align:center;
}
#index #maskLayer .add section{
    width:33.33%;
    height:7.5rem;
    padding-top:2.5rem;
    font-size:0.8rem;
    color:#27a192;
}
#index #maskLayer .add section img{
    width:1.8rem;
    height:2.55rem;
}
</style>
